import { Component } from 'react'

// 创建类组件(优势: hooks之前功能十分强大, 劣势: 写法复杂)
class Hello extends Component {
  // 提供组件状态
  state = {
    username: '',
    isSingDog: '',
  }

  handleChange = (e) => {
    // 拿到用户输入的内容, 更新数据即可
    console.log(e.target.value)

    this.setState({
      username: e.target.value,
    })
  }

  switchSingle = (e) => {
    this.setState({
      isSingDog: e.target.checked,
    })
  }
  render() {
    // this=>组件实例
    return (
      <div>
        <h3>表单元素处理</h3>
        {/* 受控组件的形式 */}
        <input
          type="text"
          value={this.state.username}
          onChange={this.handleChange}
        />

        <input
          type="checkbox"
          value={this.state.isSingDog}
          onChange={this.switchSingle}
        />
      </div>
    )
  }
}

export default Hello
